<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖放实例</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
				float: left;
				width: 200px;
				border: 1px solid #000;
				margin: 10px;
			}
			li img{
				width: 200px;
			}
			p{
				border-bottom: 1px dashed #333;
				height: 20px;
			}
			#box{
				width: 600px;
				border: 1px solid #000;
				height: 400px;
				clear: both;
			}
			.box1{
				float: left;
				width: 200px;
			}
			.box2{
				float: left;
				width: 200px;
			}
			.box3{
				float: left;
				width: 200px;
			}
			#allMoney{
				float: right;
			}
		</style>
		<script>
			window.onload = function(){
				var allLi = document.querySelectorAll("li");
				var oBox = document.querySelector("#box");
				var obj = {};
				var iNum = 0;
				var allMoney = null;
				for(var i=0; i<allLi.length; i++){
					allLi[i].ondragstart = function(ev){
						var ev = ev || window.event;
						var aP = this.getElementsByTagName('p');
						ev.dataTransfer.setData('title',aP[0].innerHTML);
						ev.dataTransfer.setData('money',aP[1].innerHTML);
						ev.dataTransfer.setDragImage(this,0,0);
					}
				};
				oBox.ondragover = function(ev){
					ev.preventDefault();
				};
				oBox.ondrop = function(ev){
					ev.preventDefault();
					var sTitle = ev.dataTransfer.getData('title');
					var sMoney = ev.dataTransfer.getData('money');
					
					if( !obj[sTitle] ){
						var oP = document.createElement('p');
						var oSpan = document.createElement('span');
						oSpan.className = 'box1';
						oSpan.innerHTML = '1';
						oP.appendChild(oSpan);
						var oSpan = document.createElement('span');
						oSpan.className = 'box2';
						oSpan.innerHTML = sTitle;
						oP.appendChild(oSpan);
						var oSpan = document.createElement('span');
						oSpan.className = 'box3';
						oSpan.innerHTML = sMoney;
						oP.appendChild(oSpan);
						oBox.appendChild(oP);
						obj[sTitle] = 1;
					}else{
						var box1 = document.getElementsByClassName('box1');
						var box2 = document.getElementsByClassName('box2');
						for(var i=0; i<box2.length; i++){
							if(box2[i].innerHTML == sTitle){
								box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
							};
						};
					};
					if( !allMoney ){
						allMoney = document.createElement("div");
						allMoney.id = 'allMoney';
						
					}
					iNum += parseInt(sMoney); 
					allMoney.innerHTML = iNum +'￥';
					oBox.appendChild( allMoney );
					
				}
			}
		</script>
	</head>
	<body>
		<ul>
			<li draggable="true">
				<img src="img/img1.jpg" />
				<p>JavaScript语言精粹</p>
				<p>40￥</p>
			</li>
			<li draggable="true">
				<img src="img/img2.jpg" />
				<p>JavaScript权威指南</p>
				<p>100￥</p>
			</li>
			<li draggable="true">
				<img src="img/img3.jpg" />
				<p>精通JavaScript</p>
				<p>75￥</p>
			</li>
			<li draggable="true">
				<img src="img/img4.jpg" />
				<p>JavaScript Dom编程艺术</p>
				<p>120￥</p>
			</li>
		</ul>
		<div id="box">
			<!--<p>
				<span class="box1">1</span>
				<span class="box2">JavaScript Dom编程艺术</span>
				<span class="box3">￥120</span>
			</p>
			<p>
				<span class="box1">1</span>
				<span class="box2">JavaScript Dom编程艺术</span>
				<span class="box3">￥120</span>
			</p>
			<div id="allMoney">￥240</div>-->
		</div>
	</body>
</html>
